<%--
  Created by IntelliJ IDEA.
  User: szq
  Date: 2022/3/17
  Time: 13:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<div class="col-md-9">
    <div class="data_list" style="border-radius: 15px;height: auto;overflow-y: auto;">
        <div class="data_list_title">
            <span class="glyphicon glyphicon glyphicon-th-list"></span>&nbsp;
            博客大厅(公开博客)
        </div>

        <%-- 判断云记列表是否存在 --%>
        <c:if test="${empty page}">
            <h2>暂未查询到云记记录！</h2>
        </c:if>
        <c:if test="${!empty page}">
            <%-- 遍历获取云记列表 --%>
            <div class="note_datas" style="min-height: 450px">
                <ul>
                    <c:forEach items="${page.dataList}" var="item" varStatus="ss">
                        <li style="width: 100%;height: 100px;">
                            <img src="statics/images/${ss.index}.jpeg" alt="博客封面" style="width: 180px;height: 90px;float: left;margin-bottom: 5px">
                            <span style="margin-left: 20px;margin-top: 5px;font-size: 26px"><a href="blog?actionName=detail&blogId=${item.id}" style="color: black;text-decoration: none;line-height: 42px">${item.title}</a></span>
                            <br>
                            <span style="margin-left: 20px;line-height: 25px;font-size: 14px">作者：${item.userName}   『<fmt:formatDate value="${item.time}" pattern="yyyy-MM-dd"/>』</span>
                            <br>
                            <img src="statics/images/see.png" style="margin-left: 20px;width: 20px;height: 20px">&nbsp;
                            <span style="font-size: 12px">
                                <c:if test="${item.viewCount  < 10000}">
                                     ${item.viewCount}
                                </c:if>
                                <c:if test="${item.viewCount  >= 10000}">
                                    <fmt:formatNumber value="${item.viewCount  / 10000}" pattern="0"/> w
                                </c:if>
                            </span>&nbsp;&nbsp;&nbsp;
                            <img src="statics/images/zan0.png" style="width: 20px;height: 20px">&nbsp;
                            <span style="font-size: 12px" id="d${ss.index}">0</span>&nbsp;&nbsp;&nbsp;
                            <img src="statics/images/ping.png" style="width: 20px;height: 20px">&nbsp;
                            <span style="font-size: 12px" id="c${ss.index}">0</span>
                        </li>
                        <div style="height: 2px;background-color: #CCCCCC"></div>

                    </c:forEach>

                </ul>
            </div>
            <%-- 设置分页导航 --%>
            <nav style="text-align: center">
                <ul class="pagination  center">
                        <%-- 如果当前不是第一页，则显示上一页的按钮 --%>
                    <c:if test="${page.pageNum > 1}">
                        <li>
                            <a href="index?pageNum=${page.prePage}&actionName=${action}&title=${title}&date=${date}&typeId=${typeId}"><span>«</span> </a>
                        </li>
                    </c:if>
                        <%-- 导航页数 --%>
                    <c:forEach begin="${page.startNavPage}" end="${page.endNavPage}" var="p">
                        <li <c:if test="${page.pageNum == p}">class="active"</c:if> >
                            <a href="index?pageNum=${p}&actionName=${action}&title=${title}&date=${date}&typeId=${typeId}">${p}</a>
                        </li>
                    </c:forEach>
                        <%-- 如果当前不是最后一页，则显示下一页的按钮 --%>
                    <c:if test="${page.pageNum < page.totalPages}">
                        <li>
                            <a href="index?&pageNum=${page.nextPage}&actionName=${action}&title=${title}&date=${date}&typeId=${typeId}">
                                <span>»</span>
                            </a>
                        </li>
                    </c:if>
                </ul>
            </nav>
        </c:if>
    </div>

</div>

<script type="text/javascript">


    //点赞数赋值
    var dianList = ${dianZanList};
    //评论数赋值
    var commentList = ${commentList};
    for(var i=0;i<dianList.length;i++){
        document.getElementById("d" + i).innerHTML = dianList[i];
        document.getElementById("c" + i).innerHTML = commentList[i];
    }

</script>
